<template>
	<div class="rightbody">
		<div class="addshape">
			<div class="shapefunc">
				<div class="funcwrap" v-show="nav_top_btn == 0">
					<ul>
						<li>
							<div class="slideblock">
								<label>颜色</label>
								<div class="colortab2 clearfix">
									<template v-for="(item,index) in svgColors.colors" >
									<p :style="setSVGAstyle(index)" class="colorpicker" @click="svgColorIndex = index">
										<el-color-picker  @change="changesvgColor"></el-color-picker>
									</p>
									</template>
								</div>
							</div>
						</li>
						<li>
							<div class="slideblock">
								<label>透明</label>
								<Slider :max="100" :min="0" @on-input="OpacityChange" v-model="opacity" style="float:left;width:230px" :tip-format="hideFormat" show-input></Slider>
							</div>
						</li>
						<li>
							<div class="slideblock">
								<label>旋转</label>
								<Slider :max="360" :min="0" v-model="rotateDeg" @on-input="rotateDegChange" style="float:left;width:230px" :tip-format="hideFormat" show-input></Slider>
							</div>
						</li>
						<li>
							<div class="numberblock">
								<label>大小</label>
								<div class="inputwidth">
									<span>宽</span>
									<Input-number :max="2000" :min="1" v-model="widthValue" style="width:80px;margin-right:23px;" @on-change="widthValueChange"></Input-number>
								</div>
								<div class="inputheight">
									<span>高</span>
									<Input-number :max="2000" :min="1" v-model="heightValue" style="width:80px;" @on-change="heightValueChange"></Input-number>
								</div>
							</div>
						</li>
						<li>
							<div class="item">
								<div class="slideblock">
									<label>圆角</label>
									<Slider v-model="borderRadius" :min="0" :max="1000" style="float:left;width:230px" :tip-format="hideFormat" @on-input="borderRadiusChange" show-input></Slider>
								</div>
							</div>
						</li>
					</ul>
      			</div>
			</div>

			<div class="shapetype clearfix">
				<ul>
					<li v-for="(item,index) in categorylist" :class="{'active':currentCategory == index}" @click="categoryClick(index)">
						<img style="width:100%;height:100%" :src="item.thumb">
						<a>{{item.name}}</a>
					</li>
				</ul>
			</div>
			<div class="shapewrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
				<div style="text-align:center"></div>
				<ul>
					<li v-for="(item,index) in currentCategoryList">
						<img style="width:100%;height:100%" :src="item.src" @click="addSvg(index)">
						<!-- <a @click="delItem(index)"></a> -->
					</li>
				</ul>
			</div>
		</div>

	</div>
</template>

<script type="text/javascript">
import api from "../api/index.js";
import picedit from "./PicEdit";
import { mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["rightTabIndex","svgColors","checkedItemData"])
  },
  data() {
    return {
      baseUrl: "http://res.yaoyue365.com/",
      categorylist: [],
      currentCategoryList: [],
      currentCategory: -1,
      pIndex: 0,
      page: 1, //当前页
      num: 10, // 一页显示多少条
      busy: false,

      color1: null,
      color2: null,
      color3: null,
      svgColorIndex: -1,
      widthValue: 0,
      heightValue: 0,
      borderShadow: 0,
      BorderShadowColor: "",
      borderListIndex: -1,
      borderShadowColorIndex: -1,
      BgColorList: [
        "#1abd9b",
        "#fff",
        "#45d1d7",
        "#4b5eb2",
        "#eeea00",
        "#f55b2e",
        "#d92940",
        "#000"
      ],
      borderColorList: [
        "#1abd9b",
        "#fff",
        "#45d1d7",
        "#4b5eb2",
        "#eeea00",
        "#f55b2e",
        "#d92940",
        "#000"
      ],
      copyCss: {},
      nav_top_btn: 0,
      options3: [
        {
          value: "none",
          label: "无"
        },
        {
          value: "dotted",
          label: "点"
        },
        {
          value: "solid",
          label: "实线"
        },
        {
          value: "dashed",
          label: "虚线"
        }
      ],
      options4: [
        {
          value: "linktype1",
          label: "页面"
        },
        {
          value: "linktype2",
          label: "网址"
        }
      ],
      options6: [
        {
          value: "enteranim1",
          label: "飞入1"
        },
        {
          value: "enteranim2",
          label: "飞入2"
        }
      ],
      animationList: [
        {
          value: "none",
          label: "无效果"
        },
        {
          value: "fadeInNormal",
          label: "淡入"
        },
        {
          value: "rotateInDownLeft",
          label: "从左滚入"
        },
        {
          value: "rotateInDownRight",
          label: "从右滚入"
        },
        {
          value: "zoomIn",
          label: "放大"
        },
        {
          value: "zoomInDown",
          label: "下落放大"
        },
        {
          value: "fadeIn",
          label: "弹性放大"
        },
        {
          value: "expandOpen",
          label: "弹性缩小"
        },
        {
          value: "fadeInRight",
          label: "从右飞入"
        },
        {
          value: "fadeInLeft",
          label: "从左飞入"
        },
        {
          value: "fadeInUp",
          label: "向上飞入"
        },
        {
          value: "fadeInDown",
          label: "向下飞入"
        },
        {
          value: "rotateIn",
          label: "旋转出现"
        },
        {
          value: "flipInY",
          label: "左右翻转"
        },
        {
          value: "flipInX",
          label: "上下翻转"
        },
        {
          value: "lightSpeedIn",
          label: "刹车"
        },
        {
          value: "slideLeft",
          label: "从右滑入"
        },
        {
          value: "slideRight",
          label: "从左滑入"
        },
        {
          value: "slideUp",
          label: "向上滑入"
        },
        {
          value: "slideDown",
          label: "向下滑入"
        },
        {
          value: "stretchRight",
          label: "从右展开"
        },
        {
          value: "stretchLeft",
          label: "从左展开"
        },
        {
          value: "pullUp",
          label: "向上展开"
        },
        {
          value: "pullDown",
          label: "向下展开"
        }
      ],
      freeFontList: [
        {
          value: "xiaoluti",
          label: "小鹿体"
        },
        {
          value: "yuanhei",
          label: "源黑"
        },
        {
          value: "kaiti",
          label: "楷体"
        },
        {
          value: "fangsong",
          label: "仿宋"
        },
        {
          value: "shouxiehaibaoti",
          label: "手写海报体"
        }
      ],
      options4: [
        {
          value: "无",
          label: "无"
        },
        {
          value: "网址",
          label: "网址"
        },
        {
          value: "页面",
          label: "页面"
        }
      ],
      fontWeight: "normal",
      fontStyle: "normal",
      textDecoration: "none",
      textAlign: "left",
      opacity: 0,
      borderStyle: "none",
      borderRadius: 0,
      borderWidth: 0,
      linktype: 0,
      jumpPageNumber: 0,
      jumpUrl: "",
      rotateDeg: 0,

      fontSize: 0,
      options2: [],
      anim: [],
      svgList: [],
      currentAniIndex: -1
    };
  },
  components: {
    picedit
  },
  created() {
    this.initCategoryData();
  },
  mounted() {
    //      console.log(this.checkedItemData)
    this.givedata(this.checkedItemData);
  },
  watch: {
    checkedItemData: function(newCheckedItemData) {
      this.givedata(newCheckedItemData);
    },
    svgColors: function(newsvgColors) {
      this.svgList = JSON.stringify(newsvgColors.colors);
    }
  },
  methods: {
    loadMore() {
      this.busy = true;
      let newPage = this.page;
      // console.log(newPage + "----" + this.num)
      this.loadSysData(this.currentCategory, newPage, this.num);
      this.busy = false;
    },

    initCategoryData() {
      this.$http
        .get(api.getCategorylist(5))
        .then(res => {
          //					console.log(res.data.lists)
          this.categorylist = res.data.lists;

          this.categoryClick(0);
        })
        .catch(error => {
          // 错误处理
          console.log(error);
          window.alert("获取分类信息出错！");
        });
    },
    categoryClick(index) {
      if (this.currentCategory == index) {
        return;
      }

      this.currentCategoryList = "";
      if (index != 0) {
        this.page = 1;
      }
      this.currentCategory = index;
      this.loadSysData(index, 1, 25);
    },
    loadSysData(index, page, pageSize) {
      var cObj = this.categorylist[index];
      if (cObj === undefined) {
        return;
      }
      // console.log(cObj)
      var biztype = cObj["id"];
      //2 图片 1 背景 3音乐 4 svg
      // this.busy = true
      this.$http
        .get(api.getSysfile(2, biztype, page, pageSize))
        .then(res => {
          // console.log(res.data.lists)
          if (this.currentCategoryList.length == 0) {
            this.currentCategoryList = res.data.lists;
            //						 debugger
            this.page++;
            // this.busy = false;
          } else {
            if (res.data.lists.length == 0) {
              // this.busy = false;
            } else {
              for (var i = 0; i < res.data.lists.length; i++) {
                var bean = res.data.lists[i];
                this.currentCategoryList.push(bean);
              }
              this.page++;
              // this.busy = false;
            }
          }
          //					this.currentCategoryList = res.data.lists;
          //						this.currentCategoryList.push(res.data.lists);
          //										for(var i = 0; i < 30; i++) {
          //											var gg = {};
          //											gg.thumb = this.baseUrl + "syspic/picnew/yq0KX1agjweAdg35AAAGm0YZJeg865.svg";
          //											this.currentCategoryList.push(gg);
          //										}
          //									if(this.currentCategoryList.length == 0) {
          //										$('.shapewrap div').html('此分类暂无数据')
          //									} else {
          //										$('.shapewrap div').empty();
          //									}
        })
        .catch(error => {
          // 错误处理
          console.log(error);
          this.busy = false;
          window.alert("获取分类资源信息出错！");
        });
    },
    addSvg(index) {
      var obj = this.currentCategoryList[index];
      //debugger
      var params = {};
      params.type = "svg";
      params.src = obj["src"];
      params.width = obj['width'] * 3;
      params.height = obj['height'] * 3;
      this.$store.dispatch("addSysFile", params);
    },
    delItem(index) {
      this.currentCategoryList.splice(index, 1);
    },
    changePic() {
      var params = {};
      params.index = 2;
      params.isChangePic = true;
      this.$store.dispatch("changeRightTab", params);
    },
    givedata(data) {
      this.opacity = 100 - data.out.css.opacity * 100;
      this.anim = JSON.stringify(data.anim);

      this.rotateDeg =
        typeof data.out.css.transform == "undefined"
          ? 0
          : parseInt(data.out.css.transform.match(/\d+(\.\d+)?/g)[0]);

      this.borderStyle =
        typeof data.in.css.borderStyle == "undefined"
          ? "none"
          : data.in.css.borderStyle;
      this.borderWidth =
        typeof data.in.css.borderWidth == "undefined"
          ? 0
          : parseInt(data.in.css.borderWidth.replace("px", ""));

      this.borderRadius =
        typeof data.in.css.borderRadius == "undefined"
          ? 0
          : parseInt(data.in.css.borderRadius.replace("px", ""));

      this.boxShadow =
        typeof data.in.css.boxShadow == "undefined"
          ? 0
          : parseInt(data.in.css.boxShadow.split(" ")[3].replace("px", ""));

      this.widthValue =
        typeof data.in.css.width == "undefined"
          ? 0
          : parseInt(data.in.css.width);
      this.heightValue =
        typeof data.in.css.height == "undefined"
          ? 0
          : parseInt(data.in.css.height);

      // console.log(typeof(data.in.properties.hasUrl) == "undefined")
      // debugger
      if (
        typeof data.in.properties.hasUrl == "undefined" ||
        data.in.properties.hasUrl == 0
      ) {
        this.linktype = "无";
      } else if (data.in.properties.hasUrl == 1) {
        this.linktype = "网址";
        // debugger
        this.jumpUrl = data.in.properties.jumpUrl;
      } else {
        this.linktype = "页面";
        this.jumpPageNumber =
          typeof data.in.properties.jumpPageNumber == "undefined"
            ? 1
            : parseInt(data.in.properties.jumpPageNumber);
      }
    },
    checkNva(index) {
      switch (index) {
        case 0:
          this.nav_top_btn = 0;
          break;
        case 1:
          this.nav_top_btn = 1;
          break;
        case 2:
          this.nav_top_btn = 2;
          break;
      }
    },
    hideFormat() {
      return null;
    },
    setSVGAstyle(index) {
      var color = this.svgColors.colors[index];

      return "background: " + color;
    },
    setAstyle(index) {
      // debugger
      var color = this.BgColorList[index];

      return "background: " + color;
    },
    OpacityChange(value) {
      // this.opacity = value;

      // console.log(parseFloat((1 - value / 100).toFixed(2)))

      var params = {};
      params.value = value;
      params.key = "opacity";
      params.type = "out";

      this.$store.dispatch("changePicStyle", params);
    },
    rotateDegChange(value) {
      this.rotateDeg = value;

      //        console.log(value)
      var params = {};
      params.value = "rotateZ(" + value + "deg)";
      params.key = "transform";
      params.type = "out";

      this.$store.dispatch("changePicStyle", params);
    },
    borderStyleChange(value) {
      var params = {};
      params.value = value;
      params.key = "borderStyle";
      // console.log(params.value)

      this.$store.dispatch("changePicStyle", params);
    },
    borderWidthChange(value) {
      var params = {};
      params.value = value + "px";
      params.key = "borderWidth";
      // console.log(params.value)
      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    changeBorderColor(index) {
      var color = this.borderColorList[index];

      this.borderListIndex = index;
      var params = {};
      params.value = color;
      params.key = "borderColor";
      this.$store.dispatch("changePicStyle", params);
    },
    changeBorderColor2() {
      this.borderListIndex = -2;

      this.clearBorderStyle();
      var params = {};
      params.value = "";
      params.key = "borderColor";

      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    clearBorderStyle() {
      var params = {};
      params.value = "none";
      params.key = "borderStyle";

      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    changeBorderColor3(value) {
      var params = {};
      params.value = value;
      params.key = "borderColor";

      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    borderRadiusChange(value) {
      //          console.log(value)
      var params = {};
      params.value = value + "px";
      params.key = "borderRadius";
      // params.type = "out";

      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    borderShadowChange(value) {
      var params = {};
      this.borderShadow = value;
      params.value = this.BorderShadowColor + " 0px 0px " + value + "px";
      params.key = "boxShadow";
      params.type = "out";
      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    changeBorderShadowColor(index) {
      var color = this.borderColorList[index];
      this.BorderShadowColor = color;
      this.borderShadowColorIndex = index;

      var params = {};
      params.value = color + " 0px 0px " + this.borderShadow + "px";
      params.key = "boxShadow";
      params.type = "out";
      this.$store.dispatch("changePicStyle", params);
    },
    changeBorderShadowColor2() {
      this.borderShadowColorIndex = -2;
      this.borderListIndex = -2;
      this.BorderShadowColor = "";
      // this.clearBorderStyle();
      var params = {};
      params.value = "" + " 0px 0px " + this.borderShadow + "px";
      params.key = "boxShadow";
      params.type = "out";
      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    changeBorderShadowColor3(value) {
      this.BorderShadowColor = value;
      var params = {};
      params.value = value + " 0px 0px " + this.borderShadow + "px";
      params.key = "boxShadow";
      params.type = "out";
      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    widthValueChange(value) {
      var params = {};
      params.value = value;
      params.key = "width";
      // debugger
      this.$store.dispatch("changePicStyle", params);
    },
    heightValueChange(value) {
      var params = {};
      params.value = value;
      params.key = "height";
      // debugger
      this.$store.dispatch("changePicStyle", params);
    },

    //添加动画
    addAni() {
      var params = {};
      params.type = "add";

      this.$store.dispatch("changeAni", params);
    },
    //删除动画
    delAni(index) {
      var params = {};
      params.type = "del";
      params.index = index;

      this.$store.dispatch("changeAni", params);
    },
    //预览动画
    reviewAni() {
      // var anim = this.$store.state.workData.pages[this.$store.state.currentPage - 1].elements[this.$store.state.checkedItems[0]].anim

      this.$store.dispatch("reviewAni");
    },
    panelChange(key) {
      // console.log(key);
      this.currentAniIndex = parseInt(key[0]);
      // debugger
    },
    aniTypeChange(value) {
      //        console.log('value' + value);
      var params = {};
      params.index = this.currentAniIndex;
      params.key = "type";
      params.value = value;
      this.$store.dispatch("changeAni", params);
    },
    aniDurationChange(value) {
      // console.log('value' + value);
      //      console.log('value' + value);
      var params = {};
      params.index = this.currentAniIndex;
      params.key = "duration";
      params.value = value;
      this.$store.dispatch("changeAni", params);
    },
    aniDelayChange(value) {
      var params = {};
      params.index = this.currentAniIndex;
      params.key = "delay";
      params.value = value;
      this.$store.dispatch("changeAni", params);
    },
    aniCountChange(value) {
      var params = {};
      params.index = this.currentAniIndex;
      params.key = "count";
      params.value = value;
      this.$store.dispatch("changeAni", params);
    },
    aniCountChange1(value) {
      //        console.log('value' + value);

      // console.log(JSON.parse(this.anim)[this.currentAniIndex].count)
      // console.log([this.currentAniIndex])
      // console.log(JSON.parse(this.anim)[this.currentAniIndex].count + "dddddd")
      // debugger
      var params = {};
      params.index = this.currentAniIndex;
      params.key = "count";
      params.value = value == true ? -1 : 1;

      // debugger
      this.$store.dispatch("changeAni", params);
    },

    jumpTypeChange(value) {
      var v = 0;

      if (value == "无") {
        v = 0;
      } else if (value == "网址") {
        v = 1;
      } else {
        v = 2;
      }

      var params = {};
      params.value = v;
      params.key = "hasUrl";
      (params.type = "in"),
        //         console.log(params.value)

        this.$store.dispatch("changePicStyle", params);
    },
    pageNumberChange(value) {
      var params = {};
      params.value = value;
      params.key = "jumpPageNumber";
      (params.type = "in"), this.$store.dispatch("changePicStyle", params);
    },
    jumpUrlChange(value) {
      // debugger
      //        console.log(this.jumpUrl)
      var params = {};
      params.value = this.jumpUrl;
      params.key = "jumpUrl";
      (params.type = "in"), this.$store.dispatch("changePicStyle", params);
    },
    changesvgColor(value) {
      //        console.log(value)
      // console.log(this.svgColorIndex)
      //        console.log(this.svgColors.id)
      //        console.log($('#svg2_' + (this.svgColors.id)).find("path").length)

      if ($("#svg2_" + this.svgColors.id).find("path").length > 1) {
        $("#svg2_" + this.svgColors.id)
          .find("path")
          .eq(this.svgColorIndex)
          .attr("fill", value);
        $("#svg1_" + this.svgColors.id)
          .find("path")
          .eq(this.svgColorIndex)
          .attr("fill", value);
      } else {
        $("#svg2_" + this.svgColors.id)
          .find("[fill], [style*='fill']")
          .attr("fill", value);
        $("#svg1_" + this.svgColors.id)
          .find("[fill], [style*='fill']")
          .attr("fill", value);
      }

      var params = {};
      params.index = this.svgColorIndex;
      params.value = value;
      this.$store.dispatch("changeSvgColorList", params);
    }
  }
};
</script>

<style type="text/javascript">
.shapetype {
  position: fixed;
  top: 360px;
  width: 300px;
  height: 235px;
  left: 80px;
  overflow-y: auto;
  border-bottom: 1px solid #eee;
}
.shapetype ul {
  overflow: hidden;
}
.shapetype li {
  float: left;
margin: 15px 20px 0 10px;
}
.shapetype li a {
  display: block;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  padding: 0 10px;
  margin: 5px;
  color: #808386;
}

.shapetype li.active a {
  color: #1abd9b;
}
.shapewrap {
  position: fixed;
  width: 310px;
  bottom: 20px;
  top: 605px;
  left: 80px;
  overflow-y: auto;
}
.shapewrap li {
  position: relative;
  float: left;
  width: 140px;
  height: 140px;
  margin: 5px;
  overflow: hidden;
}
.shapewrap li:hover a {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  right: -25px;
  background: url(../assets/images/delpic.png) center 32px no-repeat #9ba8a5;
  transform: rotate(45deg);
  cursor: pointer;
}
.shapefunc{
	position: fixed;
	top: 80px;left: 80px;width: 300px;
	border-bottom: 1px solid #eee;
}
.shapefunc li{margin-bottom: 15px;}
</style>
